<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link  th:href="@{/font-awesome.min.css}" rel="stylesheet"/>
    <!--swiper-->
    <link rel="stylesheet" th:href="@{/dist/libs/swiper/idangerous.swiper2.7.6.css}">
    <!-- bootstrap-table 表格插件样式 -->
    <link  th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link  th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link  th:href="@{/css/style.css}" rel="stylesheet"/>
    <link  th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link  th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet"  th:href="@{/dist/css/main.css}">
    <link rel="stylesheet"  th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="order02-contentPart">
    <div class="order02-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area02">
                <a class="arrow-left" href="#"></a>
                <a class="arrow-right" href="#"></a>
                <div class="swiper-container ">
                    <div class="swiper-wrapper statistics-list statisticsSwiper-list" id="orderStatistics"  >
                        <div class="swiper-slide statistics-item">
                            <div class="main color01 active">
                                <div class="indro">共计植保：</div>
                                <div class="num">
                                    <span th:text="${number}"></span>
                                    <span class="unit">次</span>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide statistics-item" th:each="cai,cStatus:${ncCai}">
                            <div th:attr="zhibaoType = *{cai.caiId}" th:class="main+' '+'color0'+${cStatus.index+1}">
                                <div class="indro" th:text="${cai.caiName}">直供</div>
                                <div class="num"><span th:text="${cai.planCounts.longs}">34</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew tab-content">
            <div class="col-sm-4 left">
                <div class="echart-item">
                    <div id="leftMain" style="width:100%;height:410px;"></div>
                </div>
            </div>
            <div class="col-sm-8 right">
                <div class="filter-btn">
                    <a class="btn" id="yearBtn">年</a>
                    <a class="btn active" id="monthBtn">月</a>
                    <a class="btn" id="dayBtn">日</a>
                </div>
                <div class="echart-item ">
                    <div id="main" style="width:100%;height:410px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/dist/libs/swiper/idangerous.swiper.min.js}"></script>
<!--echart-->
<script th:src="@{/./dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>


<script>
    $(function(){

    });
</script>
<script th:inline="javascript">

    slidesPerView=4
    if(document.body.clientWidth>1400){
        slidesPerView=6
    }

    var mySwiper = new Swiper('.swiper-container',{
        slidesPerView : slidesPerView,
    });
    $('.arrow-left').on('click', function(e){
        e.preventDefault()
        mySwiper.swipePrev()
    })
    $('.arrow-right').on('click', function(e){
        e.preventDefault()
        mySwiper.swipeNext()
    })


    window.onresize=function() {

        if(document.body.clientWidth<1400){
            mySwiper.params.slidesPerView=4;
            mySwiper.reInit();
            mySwiper.swipeTo(0,0)
        }else{
            mySwiper.params.slidesPerView=6;
            mySwiper.reInit();
            mySwiper.swipeTo(0,0)
        }
    }


    var ctx = [[@{
        /}]];
        // 基于准备好的dom，初始化echarts实例
        var list=[[${ncCai}]]
        var caiName=[];
        for( i in list){
            caiName.push(i.caiName)
        }
        var currentSortList =caiName;
        var currentSort = '共计肉量'
        var timeSort = 2;//月份
        var zhibaoType;
        /**
         * 设置柱状图的数据(参数用于获取数据)
         * @param sortIdx:共计订单/直供/内销一/内销二
         * @param timeSort:年月日
         */
        function setBarData(sortIdx,timeSort,x,y) {
            // 调用方法获取数据
            // 调用方法获取数据
            /*var xData = [[${dataTime}]];
            var yData = [[${sum}]];*/
            var xData = ['09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07', '08'];
            var yData = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210];
            if (x && y) {
                xData = x;
                yData = y;
            }
            var myChart = echarts.init(document.getElementById('main'));
            var option01 = {
                title: {
                    text: '植保次数统计表',
                    x: 'center',
                    textStyle:{
                        fontSize:32,
                        color:'#2d353e'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle:{
                        fontSize:22
                    }
                },
                grid:{
                    top:'21%',
                    bottom:'7%',
                    left:'7%',
                    right:'5%'
                },
                xAxis: {
                    name:'月',
                    nameTextStyle:{
                        color: '#a1a4a8',
                        fontSize: 20,
                    },
                    data: xData,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a3abb4',
                            fontSize: 20,
                        }
                    },
                },
                yAxis: {
                    name: '次',
                    nameTextStyle:{
                        color: '#a1a4a8',
                        fontSize: 20,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a3abb4',
                            fontSize: 20,
                        }
                    },
                },
                series: {
                    name:'植保次数',
                    type: 'bar',
                    barWidth: 18,
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#4cb3db' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3d7ee0' // 100% 处的颜色
                            }], false)
                        }
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius:[9, 9, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#60c5ff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#428af5' // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: yData
                }
            };
            myChart.setOption(option01);
        }
        setBarData(currentSort,'year')

        $('#yearBtn').click(function () {
            timeSort = 1;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart()
            // setBarData(currentSort, 'year')
        })


        $('#monthBtn').click(function () {
            timeSort = 2;
            $(this).addClass('active').siblings().removeClass('active')
            console.log(currentSort)
            initEchart()
        })


        $('#dayBtn').click(function () {
            timeSort = 3;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart();

        })



        // 饼状图高亮下标
        var currentSortIndx = -1

        // 饼状图
        var myChart00 = echarts.init(document.getElementById('leftMain'));
        var pieData = [];
        for(var i=0;i<list.length;i++){
            pieData.push({value:list[i].planCounts.longs,name:list[i].caiName});
            console.log(pieData);
        }
        var option00 = {
            legend: {
                orient: "vartical",
                right:'4%',
                bottom: "16%",
                itemWidth: 20,
                itemHeight: 15,
                textStyle:{
                    fontSize:16,
                    color:'#7c8b92'
                },
                itemGap :15,
                selectedMode:false
            },
            title: {
                text: '植保次数比例图',
                x: 'center',
                textStyle:{
                    fontSize:32,
                    color:'#2d353e'
                }
            },
            tooltip: {
                trigger: 'item',
                // formatter: "{a} <br/>{b}:({d}%)"
            },
            series:  {
                name: '',
                type: 'pie',
                center: ['35%', '57%'],
                radius: ['42%', '76%'],
                color: ['#a781ff','#a781ff', '#5ad6ff', '#ffba60', '#749fff', '#8eff73', '#f59fff','#86ffd4'],
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{d}%',
                        textStyle:{
                            fontSize:20
                        }
                    }
                },
                itemStyle: { //图形样式
                    normal: {
                        borderColor: '#ffffff',
                        borderWidth: 2,
                    },
                },
                data: pieData
            }
        };
        myChart00.setOption(option00);
        // 切换"共计订单"、"直供"
        $("#orderStatistics .statistics-item").each(function (index) {
            var _idx = index
            $(this).children(".main").eq(0).click(function () {

                currentSort = currentSortList[_idx]
                // 设置柱状图数据
                setBarData(currentSort,'year')

                $(this).addClass("active").parent().siblings().children(".main").removeClass("active");

                // 饼状图高亮
                myChart00.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentSortIndx
                });
                if (_idx>0){
                    currentSortIndx = _idx-1
                }else{
                    currentSortIndx = -1
                }
                myChart00.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex:currentSortIndx
                });

            })
        })

        //检测鼠标移入后显示之前默认高亮的那块
        /*myChart00.on('mouseover', function(e) {
            // 移除默认高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex:currentSortIndx
            });
        })*/
        //检测鼠标移出后显示之前默认高亮的那块
        /*myChart00.on('mouseout', function(e) {
            // 移除所有高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: option00.series.data.length
            });
            // 高亮选中部分
            myChart00.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex:currentSortIndx
            });
        });*/

        function reloadIt() {
            var link = ctx + "system/ncZhibao/planZhibao";
            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }
        $(".main").click(function () {
            zhibaoType = $(this).attr('zhibaoType');
            initEchart()
            return;
            $(".main").removeClass("active");
            $(this).addClass("active");
            var link=ctx+"system/ncZhibao/planZhibao";
            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "?beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("植保列表", link);
        });


        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m +"-"+ new Date().getDate());
            reloadIt();
        });

        initEchart();
        function initEchart() {
            var url = ctx + "system/ncZhibao/zhibaoQuery";
            var data = {
                beginTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                dataSpan: timeSort,
                zhibaoType:zhibaoType
            };

            myPost(url, data, function (data) {
                if (data.code == 0) {
                    var x = [];
                    var y = [];
                    $(data.rows).each(function (i, e) {
                        x.push(e.x);
                        y.push(e.count);
                    });

                    console.log(x)
                    console.log(y)
                    setBarData(currentSort, 'year', x, y);
                }

            }, function () {

            })
        }
        setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
        setTitle("植保管理",false)

</script>
</body>
</html>
